<template>


  <NavBarCmp :navTitle="feed.title" :leftArrow="true" />

  <div class="video-player" @click="handleVideoClick">
    <video ref="videoPlayer" :poster="feed.video.imgUrl" preload="auto" crossorigin="anonymous" playsinline
      @ended="onVideoEnd" v-if="feed.video" :controls="showControls">
      <source :src="feed.video.url" type="video/mp4" />
    </video>

    <van-icon name="play-circle-o" class="play-icon" size="60" color="#e54847" v-if="isShowPlayIcon"
      @click.stop="handleFirstPlay" />
  </div>

  <!-- 视频信息展示 -->
  <div class="info">
    <div class="info-title">{{ feed.title }}</div>
    <div class="info-content" v-if="feed.user">
      <img class="avatar" :src="feed.user.avatarurl" :alt="feed.user.nickName" />
      <span class="nickname">{{ feed.user.nickName }}</span>
      <img class="identification" v-if="feed.user.identification" :src="identification" />
    </div>
  </div>

  <FooterCmp />

</template>

<script setup>

import { useHead } from '@unhead/vue'




import identification from '@/assets/identification.png'
import { computed, ref, useTemplateRef, onMounted, onBeforeUnmount } from 'vue'
import { useStore } from '@/stores/index.js'

const store = useStore()
const feed = computed(() => store.feed)
useHead({
  title: feed.value?.title + '-猫眼电影'
})



const videoPlayer = useTemplateRef('videoPlayer')
const isShowPlayIcon = ref(true)
const hasStartedPlaying = ref(false)
const showControls = ref(false)

// 事件监听优化
const onPlay = () => {
  showControls.value = false
  isShowPlayIcon.value = false
}

const onPause = () => {
  showControls.value = true
}

onMounted(() => {
  if (videoPlayer.value) {
    videoPlayer.value.addEventListener('play', onPlay)
    videoPlayer.value.addEventListener('pause', onPause)
  }
})

onBeforeUnmount(() => {
  if (videoPlayer.value) {
    videoPlayer.value.removeEventListener('play', onPlay)
    videoPlayer.value.removeEventListener('pause', onPause)
  }
})

const handleFirstPlay = () => {
  videoPlayer.value.play().then(() => {
    hasStartedPlaying.value = true
  }).catch(error => {
    console.error('播放失败:', error)
  })
}

const handleVideoClick = (event) => {
  // 阻止事件冒泡到父容器
  event.stopPropagation()

  if (!hasStartedPlaying.value) return

  // 精确控制播放状态
  if (videoPlayer.value.paused) {
    videoPlayer.value.play().catch(() => {
      showControls.value = true
    })
  } else {
    videoPlayer.value.pause()
  }
}

const onVideoEnd = () => {
  videoPlayer.value.currentTime = 0
  videoPlayer.value.pause()
};
</script>

<style scoped>
.video-player {
  margin-top: 50.5px;
  cursor: pointer;
  position: relative;
  width: 100%;
  height: auto;
  line-height: 0;
  pointer-events: auto;
  /* 父容器响应点击 */
}

video {
  position: relative;
  width: 100%;
  height: auto;
  vertical-align: middle;
  /* 穿透点击事件到父容器 */
  pointer-events: none;
}

.play-icon {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: auto;
  /* 确保图标可点击 */
}

.info {
  background-color: #fff;
  padding: 15px;
}

.info-title {
  color: #333;
  font-size: 15px;
  text-align: left;
}

.info-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 15px;
}

.avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: 10px;
}

.nickname {
  font-size: 13px;
  color: #333;
}

.identification {
  width: 15px;
  height: 15px;
}
</style>
